<template>
  <div class="wrapper">
    <div class="page_content">
      <div class="top_logo">
        <div class="left_logo">
          <div class="img_logo">
            <img :src="Logo" alt/>
          </div>
        </div>
        <div class="right_search">
          <div>
            <div class="service_con" @click="goOnline()">


              <img :src="Service" alt/>
            </div>
   <!--          <img class="pifu" src="../../assets/ico/pifu.png" alt="" @click="$state.toggleTheme()">-->

            <van-popover v-model="showPopover" trigger="click" placement="bottom-end" :actions="actions" @select="onSelect">
              <template #reference>
                <div class="iconfont icon-icon_A">
                </div>
              </template>
            </van-popover>
          </div>
        </div>

      </div>
      <div class="center_tabs">
        <!-- 最多关注 -->
        <!-- TODO -->
        <div class="cu-bxo1" v-if="!loading">
          <div class="cu-title">
            {{ $t('hj5') }}
          </div>
          <van-swipe class="fo_my-swipe" :autoplay="0" indicator-color="white" @change="onChange">
            <van-swipe-item>
              <div class="cu-pink-box">
                <div class="cu-item1" :class="item.hcrate>0?'cu-up':''" v-for="(item,index) in newlist[0]" :key="index"
                     @click="handleGoToKlineDetail(item,1)">
                  <div class="t1 van-ellipsis">{{ item.name }}</div>
                  <div class="t2">{{ item.nowPrice }}</div>
                  <div class="flex-c">
                    <div class="t3">{{ item.preclose_px }}</div>
                    <div class="t3 ml10">{{ item.hcrate }}%</div>
                  </div>
                </div>
              </div>
            </van-swipe-item>
            <van-swipe-item>
              <div class="cu-pink-box">
                <div class="cu-item1" :class="item.hcrate>0?'cu-up':''" v-for="(item,index)  in newlist[1]" :key="index"
                     @click="handleGoToKlineDetail(item,2)">
                  <div class="t1 van-ellipsis">{{ item.name }}</div>
                  <div class="t2">{{ item.nowPrice }}</div>
                  <div class="flex-c">
                    <div class="t3">{{ item.preclose_px }}</div>
                    <div class="t3 ml10">{{ item.hcrate }}%</div>
                  </div>
                </div>
              </div>
            </van-swipe-item>
          </van-swipe>
          <div class="cu-title">
            {{ $t('hj310') }}
          </div>
          <div class="cu-list1">
            <div class="cu-item2">
              <div class="cu-card1" v-for="(item,index) in uslist" :key="index" @click="handleGoToKlineDetail(item,1)">
                <div class="cu-card1-top">
                  <div class="text1 van-ellipsis">{{ item.name }}</div>
                  <div :class="item.hcrate<0?'text2':'text4'">{{ item.hcrate }}%</div>
                </div>
                <div class="cu-card1-bottom">
                  <div class="cu-tag1 cu-tag-red">US</div>
                  <div class="text3">{{ item.code }}</div>
                </div>
              </div>
            </div>
            <div class="cu-item2">
              <div class="cu-card1" v-for="(item,index) in hklist" :key="index" @click="handleGoToKlineDetail(item,2)">
                <div class="cu-card1-top">
                  <div class="text1 van-ellipsis">{{ item.name }}</div>
                  <div :class="item.hcrate<0?'text2':'text4'">{{ item.hcrate }}%</div>
                </div>
                <div class="cu-card1-bottom">
                  <div class="cu-tag1 cu-tag-blue">HK</div>
                  <div class="text3">{{ item.code }}</div>
                </div>
              </div>
            </div>
            <div class="cu-item2">
              <div class="cu-card1" v-for="(item,index) in thlist" :key="index" @click="handleGoToKlineDetail(item,3)">
                <div class="cu-card1-top">
                  <div class="text1 van-ellipsis">{{item.name}}</div>
                  <div :class="item.hcrate<0?'text2':'text4'">{{ item.hcrate }}%</div>
                </div>
                <div class="cu-card1-bottom">
                  <div class="cu-tag1 cu-tag-green">TH</div>
                  <div class="text3">{{ item.code }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <van-skeleton title :row="6" :loading="loading" class="focus_skeleton"/>
        <!-- <div class="focus_on" v-if="!loading">
          <div class="fo_content">
            <div class="top_title">
              {{ $t('hj5') }}
            </div>
            <div class="fo_banner">
              <van-swipe class="fo_my-swipe" :autoplay="0" indicator-color="white" @change="onChange">
                <van-swipe-item v-for="(item, index)  in proData" :key="index">
                  <div class="item_cont" :class="idx != 2 ? 'item_conts' : ''"
                    v-for="(item2, idx) in proData[currentIndex]" :key="idx" @click="goDetail(item2)">
                    <div class="top_fo">
                      <div class="title">
                        {{ item2.name }}
                      </div>
                      <div class="numbers">
                        {{ item2.price }}
                      </div>
                      <div class="percentage" :class="item2.range > 0 ? 'gree' : 'redd'">
                        <span style="font-weight: 500;">{{ item2.range > 0 ? `${item2.range}` :
                            `${item2.range}`
                        }}</span>
                      </div>
                    </div>
                    <div class="bottom_fo">
                      <div class="title">
                        <span class="numberid" style="margin-right: 0.12rem;">{{ item2.symbol }}</span>
                      </div>
                      <div class="numbers" :class="item2.floatPoint > 0 ? 'gree' : 'redd'">
                        <img :src="Huo" alt style="width: 0.4rem;height: 0.4rem;" />
                        <span class="point" style="height: 0.4rem;">{{ item2.pnum
                        }}</span>
                      </div>
                      <div class="percentage">
                        <el-tag key="100X"
                          style="width: 80%;text-align: center;height: 0.45rem!important;line-height: 0.45rem!important;">
                          {{ getNum1(Number(item2.pnum.slice(0, 1))) + 'X' }}
                        </el-tag>
                      </div>
                    </div>
                  </div>
                </van-swipe-item>
              </van-swipe>
            </div>
          </div>
        </div> -->
      </div>
      <van-skeleton title :row="18" :loading="loading"/>
    </div>
    <!-- tab -->
    <GoToLogin v-show="isGoTo"/>
  </div>
</template>
<script>
import HomeList from "./components/home-list";
import Echart from "./components/echart.vue";
import * as api from "@/axios/api";
import Logo from "@/assets/img/icon_home_logo.png";
import Searchs from "@/assets/ico/leng.png";
import Service from "@/assets/home/icon_talk.png";
import clear from "@/assets/home/close.png";
import Announcement from "@/assets/img/black_laba.png";
import Tops from "@/assets/home/1.png";
import Rumen from "@/assets/home/2.png";
import Xuexi from "@/assets/home/3.png";
import Guanyu from "@/assets/home/4.png";
import Huo from "@/assets/home/huo.png";
import banner1 from "@/assets/img/b1.png";
import banner2 from "@/assets/img/b2.png";
import banner3 from "@/assets/img/b3.png";
// import indexData from "./data.json";
import GoToLogin from '@/page/home/components/GoLogin.vue';

export default {
  components: {
    HomeList,
    GoToLogin,
    Echart,
  },
  props: {},
  data() {
    return {
      Logo,
      Searchs,
      Service,
      clear,
      Announcement,
      indexData: [],
      Huo,
      is_login: false,
      loading: true,
      close: true,
      proData: [], // 分割好的数据
      currentIndex: 0,
      bannerImgsArr: [{
        img: banner1
      }, {
        img: banner2
      }, {
        img: banner3
      }],
      announcementMess: "20202/10 - 交易时间安排",

      artList: [],
      news: "tab_0",
      onlineService: "",
      isGoTo: false,
      bannerList: [],
      userInfo: [],
      showPopover: false,
      actions: [/* {text: 'ZH-TW', icon: require('@/assets/ico/Chinese.png'), lang: 'zh-CN', translate: 'chinese_simplified'}, */
        {text: '繁體中文', icon: require('@/assets/ico/tw.png'), lang: 'tww', translate: 'chinese_traditional'},

        {text: 'English', icon: require('@/assets/ico/english.png'), lang: 'en', translate: 'english'},
          {text: 'ภาษาไทย', icon: require('@/assets/ico/ภาษาไทย.png'), lang: 'thai', translate: 'thai'},
        {text: 'Japanese', icon: require('@/assets/ico/Japanese.png'), lang: 'jp', translate: 'japanese'},
        {text: 'India', icon: require('@/assets/ico/in.png'), lang: 'India', translate: 'hindi'},
        {text: 'Singapore', icon: require('@/assets/ico/sg.png'), lang: 'sg', translate: 'singapore'}
      ],

      uslist: [],
      hklist: [],
      thlist: [],
      timer1: null,
      timer2: null,
      timer3: null,
      timer4: null
    };
  },
  beforeDestroy() {
    clearInterval(this.timer1)
    clearInterval(this.timer2)
    clearInterval(this.timer3)
    clearInterval(this.timer4)
  },
  computed: {
    newlist() {

      let uslist = [...this.uslist]
      let hklist = [...this.hklist]
      let list1 = uslist.slice(0, 3)
      let list2 = hklist.slice(0, 3)
      return [list1, list2]
    },
    navsArr() {
      return [{
        img: Tops,
        title: this.$t('hj1'),
      },
        {
          img: Rumen,
          title: this.$t('hj2'),
        },
        {
          img: Xuexi,
          title: this.$t('hj3'),
        },
        {
          img: Guanyu,
          title: this.$t('hj4'),
        }]
    }
  },
  methods: {
    //动态数字
    randomNum(num) {
      num = Number(num);
      const operation = Math.random() < 0.5 ? -0.01 : 0.01;
      return Number(Number(num + (1 * operation)).toFixed(2));
    },
    //进入详情
    handleGoToKlineDetail(item, index) {

      let th_id = ''
      var codes = "";
      var names = "";
      var stock_type = "";
      var soks = "";
      var if_zhishu = '0';
      var if_us = '';
      switch (index) {
        case 1:
          codes = item.code;
          names = item.name;
          stock_type = item.stock_type == 'us' ? item.stock_type + 'a' : item.stock_type;
          soks = item.type ? item.type : this.filterSH(item.stock_type);
          if_zhishu = '0';
          if_us = 1;
          break;
        case 2:
          codes = item.code;
          names = item.name;
          stock_type = item.stock_type + 'a';
          if_us = '2';
          soks = item.type;
          if_zhishu = '0';
          break;
        case 3:
          codes = item.code;
          names = item.spell;
          stock_type = 'th';
          soks = 0;
          if_us = 0;
          if_zhishu = 0;
          th_id = item.id || item.Id
          break;
        default:
          break;
      }
      this.$router.push({
        path: "/kline",
        query: {
          name: names,
          stockplate: item.stock_plate,
          code: codes,
          type: stock_type,
          sok: soks,
          if_us: if_us,
          usType: item.type,
          if_zhishu: if_zhishu,
          th_id: th_id,
        }
      });
    },
    generateRandomNumber() {
      const min = -3;
      const max = 3;
      const precision = 2;
      return parseFloat(Math.random() * (max - min) + min, precision).toFixed(2);
    },

    onSelect(e) {
      console.log("开发者tg:gncms", e)
      this.$i18n.locale = e.lang;
      window.localStorage.setItem('language', e.lang);
      translate.changeLanguage(e.translate)
      // translate.listener.start();	//开启html页面变化的监控，对变化部分会进行自动翻译。注意，这里变化区域，是指使用 translate.setDocuments(...) 设置的区域。如果未设置，那么为监控整个网页的变化
      // translate.execute(); //执行翻译初始化操作，显示出select语言选择
    },
    async getUserInfo() {
      // 获取用户信息
      let data = await api.getUserInfo();
      if (data.status === 0) {
        // 判断是否登录
        this.$store.state.userInfo = data.data;
        this.userInfo = data.data;
      }
      else {
      }
    },
    //构造随机数列表  50 100 200
    getNum1(num) {
      if (num == 1) {
        return 50;
      }
      else if (num == 2) {
        return 100;
      }
      else if (num >= 3) {
        return 200;
      }
    },
    goDetail(item) {
      if (this.userInfo.length == 0) {
        this.$store.commit('dialogVisible', true);
        return;
      }
      this.$router.push({
        path: "/kline",
        query: {
          name: item.name,
          stockplate: item.stock_plate,
          code: item.symbol.substring(2, item.symbol.length),
          type: item.market,
          sok: this.filterSH(item.market),
          if_zhishu: '0',
        }
      });
    },
    filterSH(val) {
      if (val === "sh") {
        return 1;
      }
      else if (val === "bj" || val === "sz") {
        return 0;
      }
    },
    goOnline() {
      this.$router.push('/service');
    },
    async getInfoSite() {

      let data = await api.getInfoSite()
      if (data.status === 0) {
        this.onlineService = data.data.onlineService
      }
      else {
        this.$store.commit('elAlertShow', {'elAlertShow': true, 'elAlertText': data.msg});
      }
    },
    async getStock() {
      let opt = {
        pageNum: 1,
        pageSize: 4,
        stockPlate: '',
        keyWords: '',
        stockType: 'us'
      };
      let data = await api.getStock(opt);
      if (data.status === 0 && data.data.list && data.data.list.length > 0) {
        this.uslist = data.data.list;
        this.timer1 = setInterval(() => {
          this.uslist.forEach((item, index) => {
            item.hcrate = this.randomNum(item.hcrate)
            item.nowPrice = this.randomNum(item.nowPrice)
            item.preclose_px = this.randomNum(item.preclose_px)
          })
        }, 1500)
      }
    },
    async getStock2() {
      let opt = {
        pageNum: 1,
        pageSize: 4,
        stockPlate: '',
        keyWords: '',
        stockType: 'hk'
      };
      let data = await api.getStock(opt);
      if (data.status === 0 && data.data.list && data.data.list.length > 0) {
        this.hklist = data.data.list;
        this.timer2 = setInterval(() => {
          this.hklist.forEach((item, index) => {
            item.hcrate = this.randomNum(item.hcrate)
            item.nowPrice = this.randomNum(item.nowPrice)
            item.preclose_px = this.randomNum(item.preclose_px)
          })
        }, 1500)
      }
    },
      async getStock3() {
        let opt = {
            pageNum:1,
            pageSize: 4,
            stockPlate:'',
            keyWords: '',
            stockType: 'th'
        };
        let data = await api.getStock(opt);
        if (data.status === 0 && data.data.list && data.data.list.length > 0) {
            this.thlist = data.data.list;
            // this.thlist.forEach(item=>{
            //     item.hcrate = this.generateRandomNumber()
            // })
            this.timer3 = setInterval(()=>{
              this.thlist.forEach((item,index)=>{
                item.hcrate = this.randomNum(item.hcrate)
              })
            },1500)
        }
      },

    onChange(index) {
      this.currentIndex = index;

    },
    handleSearchClick() {
      //this.loading = !this.loading;
      this.$router.push({path: "/trading-list", query: {type: 1}});
    }
  },
  filters: {
    gettime(time) {
      if (!time) {
        return "";
      }
      var nd = new Date(time);
      var y = nd.getFullYear();
      var mm = nd.getMonth() + 1;
      var d = nd.getDate();
      var h = nd.getHours();
      var m = nd.getMinutes();
      var c = nd.getSeconds();
      if (mm < 10) {
        mm = "0" + mm;
      }
      if (d < 10) {
        d = "0" + d;
      }
      if (h < 10) {
        h = "0" + h;
      }
      if (m < 10) {
        m = "0" + m;
      }
      if (c < 10) {
        c = "0" + c;
      }
      //17:35:2922-06-2022
      return y + "-" + mm + "-" + d + " " + h + ":" + m + ":" + c;
    }
  },
  mounted() {
    this.getUserInfo();
    this.getInfoSite();
    this.getStock();
    this.getStock2();
    this.getStock3();

    setTimeout(() => {
      this.loading = false
    }, 2000)

  }
};
</script>
<style lang="less" scoped>
.text1 {
  font-size: 20px;
  color: #333;
  width: 100px;
}

.text2 {
  font-size: 20px;
  color: #f03a55;
}

.text4 {
  font-size: 20px;
  font-weight: bold;
  color: #00a870;
}

.text3 {
  font-size: 18px;
  color: #777;
  margin-left: 10px;
}

.cu-tag1 {
  font-size: 12px;
  color: #fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.cu-tag-red {
  background: #e84a5b;
}

.cu-tag-blue {
  background: #4462e5;
}

.cu-tag-green {
  background-color: #00a870;
}

/deep/ .van-swipe__indicators {
  bottom: 0.1rem;
}

/deep/ .van-swipe__indicator {
  background-color: #2d8cf0 !important;
  opacity: 1;
}

/deep/ .van-swipe__indicator--active {
  width: 0.35rem !important;
  border-radius: 0.23rem;
  background-color: #aec7ec !important;
}

.cu-bxo1 {
  padding: 15px;
}

.cu-title {
  font-size: .4rem;
  font-weight: 500;
  color: #0f1112;
  line-height: .54rem;
  font-weight: bold;
}

.cu-list1 {
  margin-bottom: 100px;

  .cu-item2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    margin: 15px 0;

    .cu-card1 {
      border-radius: 10px;
      border: 1px solid #ddd;
      height: 100px;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .cu-card1-top {
        display: flex;
        justify-content: space-between;
        padding: 10px 20px;
      }

      .cu-card1-bottom {
        display: flex;
        padding: 10px 20px;
        align-items: center;
      }
    }
  }

}

.flex-c {
  display: flex;
}

.ml10 {
  margin-left: 10px;
}

.cu-pink-box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 160px;

  .cu-item1 {
    width: 30%;
    height: 120px;
    padding-top: 10px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(240, 58, 85, .15) 0%, rgba(240, 58, 85, .1) 50%, rgba(240, 58, 85, .03) 100%);;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    .t1 {
      font-size: 16px;
      color: #333;
      height: 20px;
      line-height: 20px;
      width: 100px;
    }

    .t2 {
      height: 20px;
      font-size: .45333rem;
      color: rgb(240, 58, 85);
      font-weight: 500;
      line-height: 20px;
    }

    .t3 {
      color: #f03a55;
      font-size: 12px;
      height: 20px;
      line-height: 20px;
    }
  }

  .cu-up {
    background: linear-gradient(180deg, rgba(0, 168, 112, .15) 0%, rgba(0, 168, 112, .1) 50%, rgba(0, 168, 112, .03) 100%);

    .t2, .t3 {
      color: #00a870;
    }
  }
}

/deep/ .mint-msgbox-message {
  line-height: 1 !important;
  height: 2rem !important;
  display: flex !important;
  align-items: center !important;
}

.mb100 {
  margin-bottom: 200px;
}

.wrapper {
  width: 100%;
  min-height: 100%;
  background-color: #fff;
  padding-top: .3128rem;

  .page_content {
    width: 100%;
    height: 100%;
  }
}

.top_logo {
  width: 100%;
  height: 0.7949rem;
  display: flex;
  padding-right: 0.3rem;

  > div {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .img_logo {
    width: 3.3077rem;
    height: 0.6154rem;
    margin-left: 0.3846rem;

    > img {
      width: 100%;
      height: 100%;
    }
  }

  .right_search {
    justify-content: flex-end;
    width: 50%;

    > div {
      width: 34%;
      height: 0.4615rem;
      display: flex;
      justify-content: space-between;


      > div {
        width: 0.5615rem;
        height: 0.5615rem;

        > img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

.center_tabs {
  width: 100%;
  height: auto;
  margin-top: 0.2308rem;

  > .banner_top {
    width: 100%;

    img {
      width: 100%;
      height: 100%;
    }

    .van-swipe-item {
      height: 3.0615rem;
      padding: 0 0.264rem;
      border-radius: 0.3rem;
    }

    .van-swipe-item img {
      border-radius: 0.3rem;
    }
  }

  > .announcement {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.2rem 0 0.2rem 0;

    > .an_content {
      width: 95%;
      height: 0.559rem;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .an_left_icon {
        width: 4%;
        height: 70%;
        display: flex;
        align-items: center;

        > img {
          width: 100%;
          height: 100%;
        }
      }

      .an_right_message {
        width: 93%;
        height: 100%;
        line-height: 0.559rem;
        align-items: center;
        align-content: center;
        font-size: 0.29rem;
        white-space: nowrap;
        overflow: hidden;
        // text-overflow:ellipsis;
      }
    }
  }

  .navs {
    width: 100%;
    height: 2.6154rem;

    display: flex;
    justify-content: center;


    > .navs_content {
      position: relative;
      overflow: hidden;
      width: 95%;
      height: 100%;
      border-radius: 0.2564rem;
      display: flex;

      > .chacha {
        width: 1rem;
        height: 1rem;
        border-radius: 100%;
        background-color: rgb(210, 210, 212);
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        right: -0.4rem;
        top: -0.4rem;

        > div {
          width: 0.3554rem;
          height: 0.3554rem;
          margin-top: 0.3rem;
          margin-left: 0.15rem;

          > img {
            width: 100%;
            height: 100%;
          }
        }

      }

      > div {
        width: 25%;
        height: 100%;
        display: flex;
        align-items: center;

        > div {
          width: 100%;
          height: 60%;

          > .top_img {
            width: 100%;
            height: 70%;
            display: flex;
            align-items: center;
            justify-content: center;

            > div {
              width: 0.9718rem;
              height: 0.9718rem;

              > img {
                width: 100%;
                height: 100%;
              }
            }
          }

          > .bottom_navs {
            width: 100%;
            height: 30%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 0.33rem;
            margin-top: 0.15rem;
          }
        }
      }
    }
  }

  .focus_on {
    width: 100%;
    height: 6.4231rem;
    margin-top: 0.2564rem;
    display: flex;
    align-items: center;
    justify-content: center;

    .fo_content {
      width: 95%;
      height: 100%;
      padding: 0 0.2564rem;
      border-radius: 0.2564rem;
      padding-top: 0.2rem;

      .top_title {
        width: 100%;
        height: 0.8821rem;
        display: flex;
        font-size: 0.4rem;
        font-weight: 800;
        align-items: center;
      }
    }


    .fo_banner {
      width: 100%;
      height: calc(100% - .8821rem - 0.3rem);
    }
  }

  .item_cont {
    width: 100%;
    height: 1.5385rem;
    border-bottom: 0.5px solid #ececec;
    position: relative;
    border: none;
    display: flex;
    flex-wrap: wrap;
    align-content: center;

    > div {
      width: 100%;
      height: 30%;
    }

    .top_fo,
    .bottom_fo {
      display: flex;
      justify-content: space-between;

      span {
        display: inline-block;
      }

      .title {
        width: 30%;
        height: 100%;
        display: flex;
        align-items: center;
        font-weight: 500;

      }

      .aikesi {
        width: auto;
        height: 0.3rem;
        background: #dbe3f0;
        color: #546daf;
        padding-left: 0.2rem;
        padding-right: 0.2rem;
        font-size: 0.15rem;
        line-height: 0.3rem;
        margin-right: 0.1rem;
      }

      .numberid {
        font-size: 0.28rem;
        display: flex;

        line-height: 0.5rem;
      }

      .numbers {
        width: 20%;
        height: 100%;
        display: flex;
        align-items: center;

      }

      .point {
        font-size: 0.28rem;
        height: 0.5rem;
        line-height: 0.5rem;
      }

      .percentage {
        width: 20%;
        height: 100%;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
      }

      .percentage span {
        height: 0.5rem;
        line-height: 0.5rem;
      }
    }

    .top_fo {
      font-size: 0.3846rem !important;
    }

    .bottom_fo {
      margin-top: 0.1rem;
      font-size: 0.1846rem;
      color: #999898;
    }

    .percentage.gree {
      color: green !important;
    }

    .percentage.redd {
      color: red !important;
    }
  }
}

.item_conts::after {
  content: "";
  position: absolute;
  bottom: 0;
  background: #ececec;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.my-swipe .van-swipe-item {

  font-size: 0.5128rem;
  line-height: 3.8462rem;
  text-align: center;
  overflow: hidden;
}

.fo_my-swipe .van-swipe-item {

  font-size: 0.5128rem;
  line-height: 3.8462rem;
  overflow: hidden;
}

.fo_my-swipe {
  width: 100%;
  height: 100%;
}

.focus_skeleton {
  margin-top: 1rem;
}

.van-skeleton__row,
.van-skeleton__title {
  height: .7rem;
}

.news-tab {
  width: 95%;
  position: relative;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: 0.2rem;
  border-radius: 0.4rem 0.4rem 0 0;
  padding-top: 0.3rem;


  /deep/ .is-selected .tab-name {
    position: relative;
  }

  /deep/ .mint-navbar .mint-tab-item.is-selected {
    border: 0 !important;
    border-bottom: none;
  }

  /deep/ .is-selected .tab-name:after {
    position: absolute;
    display: block;
    content: '';
    height: .07rem;
    background-color: #1381A4;
    width: 100%;
    left: 0;
    bottom: -.25rem;
  }
}

.news-content {
  position: relative;
  padding: 0.3rem;
}

.item-out {
  position: relative;
  border-left: 0.01rem solid rgba(192, 192, 192, 0.8);
  padding: 0 0.25rem 1rem 0.25rem;
}

.item-out::before {
  content: "●";
  position: absolute;
  top: -0.1rem;
  left: -0.128rem;
  margin: auto;
}

.item-times {
  color: #999;
  margin-bottom: 0.15rem;
}

.titContent {
  position: relative;
  width: 100%;
  font-size: .35rem;
  line-height: .46rem;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  display: -webkit-box;
}

.neitu {
  width: 100%;
  border-radius: 0.05rem;
  margin-top: 0.3rem;
  margin-bottom: 0.8rem;
}

.neitu img {
  width: 100%;
  border-radius: 0.05rem;
}

.block-out {
  margin-top: 0.2rem;
}

.blocks {
  width: auto;
  font-size: 0.32rem;
  padding: 0.08rem 0.15rem 0.08rem 0.15rem;
  display: inline-block;
  border: 0.0513rem solid #41AC75;
  color: #41AC75;
}

.animate {

  padding-left: 20px;

  font-size: 0.29rem;

  color: #000;

  display: inline-block;

  white-space: nowrap;

  animation: 10s wordsLoop linear infinite normal;

}


@keyframes wordsLoop {

  0% {

    transform: translateX(100%);

    -webkit-transform: translateX(100%);

  }

  100% {

    transform: translateX(-100%);

    -webkit-transform: translateX(-100%);

  }

}


@-webkit-keyframes wordsLoop {

  0% {

    transform: translateX(100%);

    -webkit-transform: translateX(100%);

  }

  100% {

    transform: translateX(-100%);

    -webkit-transform: translateX(-100%);

  }

}

</style>
